<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<!-- serch -->
		<div class="search">
			<div class="searchBot f f-a-c f-j-b">
				<div class="inpBox f f-a-c">
					<input type="text" class="inp" v-model="search" placeholder="Search.." name="" id="" />
					<div @click="goSearch" class="scheBtn f f-a-c f-j-c hand"><img src="/src/assets/sche.png" class="scheImg" alt="" /></div>
				</div>
				<div class="rigTab f f-a-c">
					<div class="rigTitle">Popular:</div>
					<div class="tabsTit hand" @click="search = item.value" v-for="(item, index) in port.messageList">{{ item.value }}</div>
					<!-- <div class="tabsTit">Venture Capital</div>
					<div class="tabsTit">Career Pivot</div>
					<div class="tabsTit">Law</div> -->
				</div>
			</div>
		</div>
		<!-- tabs -->
		<div class="waiTabs">
			<div class="tabs f f-a-c f-j-b m-0-a">
				<div class="leftTabs">
					<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
						<div v-for="(item, index) in port.tabsList" :key="index">
							<el-tab-pane :label="item.label" :name="index"></el-tab-pane>
						</div>
					</el-tabs>
				</div>
				<div @mouseenter="showDrawer(1)" class="rigTu"><img src="/src/assets/serch/move.png" class="moveImg hand" alt="" /></div>
			</div>
			<div v-show="drawerShow" @click="removePop" class="mask">
				<div @click.stop="showDrawer(2)" class="maskBox animate-fadeInDown">
					<div class="maskBoxShow f f-a-c f-w-w">
						<div v-for="(ite, inde) in port.popoList" @click.stop="sectList(ite, inde)" :key="inde" class="maskItem hand">{{ ite.label }}</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 第一个------------------------ -->
		<!-- 47 experts found -->
		<div class="found">
			<div class="foundTop f f-a-c f-j-b">
				<div class="foundLrft">30 Clubs</div>
			</div>

			<div class="work">KnowClub contents</div>
			<!-- How does KnowClub work? -->
			<!-- countList -->
			<div class="countList m1280 f f-w-w f-a-c">
				<div v-for="(item, index) in port.foundList" @click="goartDetils(item)" :key="index" class="hand countItem f f-a-c">
					<div class="lefImg"><img :src="item.image" alt="" /></div>
					<div class="rightBox">
						<div class="topName">{{ item.clubName || "--" }}</div>
						<div class="xiaoName">{{ item.title || "--" }}</div>
						<div class="count">
							{{ item.content }}
						</div>
						<div class="time f f-a-c f-j-b">
							<span>{{ dayjs(item.publishTime).format("DD/MM/YYYY") }}</span>
							<span>More</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div style="margin-bottom: 80px" class="hand">
			<div class="example-pagination-block f f -a-c f-j-c">
				<el-pagination @size-change="sizeChange" @current-change="currentChange" :default-page-size="8" layout="prev, pager, next" :total="total" />
			</div>
		</div>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ElMessage, dayjs } from "element-plus";
	import { ArrowDown } from "@element-plus/icons-vue";
	import { ClassificationTree } from "@/api/commonality.js";
	import { ArticeList, PopularClubList, SuggestForYouList, ShuffleList, ManageList } from "@/api/knowClub/index.js";
	import { SearchProt } from "@/api/xpert.js";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	import { ref, onMounted, reactive } from "vue";
	const activeName = ref(-1);
	// let Price=ref('')
	let statusTab = ref(1);
	let drawerShow = ref(false);
	const addressNmae = ref("Location");
	let tabInd = ref(0);
	let search = ref("");
	let Price = ref("Price: low - high");
	let total = ref(0);
	let totalTow = ref(0);
	let totalFour = ref(0);
	let totalStree = ref(0);
	let pageNum = ref(1);
	let pageNumTow = ref(1);
	let pageNumStree = ref(1);
	let pageNumFour = ref(1);
	let priceList = ref([
		{ name: "Price: low - high", id: 1 },
		{ name: "Price: high - low", id: 2 },
		// { name: "Subscription", id: 3 },
		{ name: "FansNum", id: 3 }
	]);
	const topics = ref("");
	let port = reactive({
		tabsList: [],
		popoList: [],
		foundList: [],
		popularList: [],
		suggesList: [],
		contList: [],
		messageList: []
	});
	let cond = reactive({
		price: "lowPrice",
		language: "",
		topics: "",
		areaCode: "",
		industryTow: "",
		industryOne: ""
	});
	const open = ref(false);
	onMounted(async () => {
		await ManageLists();
		await handleClose();
		await handleSearch();
		await shuffleList();
		window.addEventListener("scroll", handleScroll);
	});
	const goSearch = () => {
		handleSearch();
	};
	const goartDetils = item => {
		router.push({
			path: "/ClubDetils",
			query: {
				id: item.id
			}
		});
	};
	// 获取输入框提示
	const ManageLists = async () => {
		let n = await ManageList({ title: "kc_popular" });
		port.messageList = n.data;
	};
	// 第四个Popular club列表
	const shuffleList = async () => {
		let n = await ShuffleList({ pageNumFour: pageNumFour.value });
		totalFour.value = n.data.total;
		port.contList = n.data.list;
	};

	// tabs
	const handleClick = (tab, e) => {
		cond.industryOne = port.tabsList[tab.index].id;
		console.log(tab.index, e, "123456");
		tabInd.value = tab.index;
		port.popoList = port.tabsList[tabInd.value].children;
		// id存起来
		cond.industry = port.tabsList[tabInd.value].id;
		drawerShow.value = true;
		pageNum.value = 1;
		// 请求
		handleSearch();
	};
	const handleClose = async done => {
		let n = await ClassificationTree();
		port.tabsList = n.data;
		// 默认请求第一个分类
	};
	// 切换tabs
	const sectList = (item, index) => {
		cond.industryTow = item.id;
		drawerShow.value = false;
		if (item.level == 1) {
			activeName.value = index;
		}
		pageNum.value = 1;
		handleSearch();
	};
	const showDrawer = num => {
		port.popoList = port.tabsList;
		drawerShow.value = !drawerShow.value;
	};
	// 搜索接口
	const handleSearch = async () => {
		let obj = {
			industryOne: cond.industryOne || "",
			industryTwo: cond.industryTow || "",
			clubName: search.value || "",
			FansNumSort: "",
			subscriptionSort: "",
			// clubIdSort: cond.price == "lowPrice" ? "ASC" : "DESC",
			pageNum: pageNum.value
		};
		let n = await ArticeList(obj);
		total.value = n.data.total;
		port.foundList = n.data.list;
		console.log(port.foundList, "444444444444");
	};
	// 点击去个人主页
	const goUserInfo = () => {
		router.push("/PersonalHome");
	};
	// 切换分页
	const sizeChange = e => {
		console.log(e, "1111111");
	};
	// 切换分页
	const currentChange = e => {
		console.log(e, "1111111");
		pageNum.value = e;
		handleSearch();
	};
	// 当移除时
	const removePop = () => {
		drawerShow.value = false;
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
